<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.min.css" rel="stylesheet" />
    <link href="../style/fjol_style.css" rel="stylesheet" />
    <link rel="stylesheet" type="text/css" href="../style/xol_style.css"/>
    <link href="../css/mui.picker.min.css" rel="stylesheet" />
    <link href="../css/iosSelect.css" rel="stylesheet" />
	</head>

	<body>
		<header class="mui-bar mui-bar-nav newbgRed">
		    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
		    <h1 class="mui-title">房贷计算</h1>
		</header>
		
		<div class="mui-content">
		    <div class="mui-scroll-wrapper" style="top: 50px;">
		        <div class="mui-scroll">
		            <!--这里放置真实显示的DOM内容-->
		            <ul class="mui-table-view">
		            	<li class="mui-table-view-cell">
		                        <a class="">
		                     总价
		                    <span class="mui-pull-right mr10"><em class="colorGreen f14" id="allPayment">200</em>万</span>
		                </a>
		                    </li>
		                    <li class="mui-table-view-cell" id="toDownPayment">
		                        <a class="mui-navigate-right">
		                     首付比例
		                    <span class="mui-pull-right mr10 " style="color: #999999;"><i id="donePercent">四成</i>(<em id="downPaymentNum">80</em>万)</span>
		                </a>
		                    </li>
		                </ul>
		                <br />
		            
		            	<p style="line-height: 0;" class="mb10">贷款总额<em id="loanamount"></em>万</p>
		            	<ul class="mui-table-view">
		            		<li class="mui-table-view-cell" id='publicFunds'>
		            			<span class="mui-pull-left">公积金贷款</span>
		            			<div class="ui-alert mui-pull-right">
		            				<span id="houseFund">60万</span> <span id="houseFundY">年限30年</span>
		            			</div>
		            		</li>
		            		<li class="mui-table-view-cell" id="publicFundRate">
		                        <a class="mui-navigate-right">
		                     公积金贷款利率
		                    <span class="mui-pull-right mr10" style="color: #999999;"></span>
		                </a>
		                    </li>
		            		<li class="mui-table-view-cell" id='businessLoan'>
		            			<span class="mui-pull-left">商业贷款</span>
		            			<div class="ui-alert mui-pull-right">
		            				<span id="businessFund">60万</span> <span id="businessFundY">年限30年</span>
		            			</div>
		            		</li>
		            		<li class="mui-table-view-cell" id="businessFundRate">
		                        <a class="mui-navigate-right">
		                     商贷利率
		                    <span class="mui-pull-right mr10" style="color: #999999;"></span>
		                </a>
		                    </li>
		            	</ul>
		            <p class="p10">贷款基准利率：公积金<em class="public-rate"></em>%，商业<em class="business-rate"></em>%</p>

					<br />
					
		        </div>
		    </div>
		    
		    <span class="mui-hidden" id="loanboxShadow" style="position: fixed; top: 0; left: 0; bottom: 0; right: 0; z-index: 3; background: rgba(0,0,0,0.5);"></span>
		    <nav class="mui-bar mui-bar-tab" style="background: white; box-shadow: none; ">
		    	<div class="loanListBox mui-hidden" style="background: #efeff4;">
				<div id="segmentedControl" class="mui-segmented-control">
					<a class="mui-control-item mui-active" href="#item1" id="sameIntLoan">等额本息</a>
					<a class="mui-control-item" href="#item2" id="sameCapLoan">等额本金</a>
				</div>
			
			<div>
				<div id="item1" class="mui-control-content mui-active">
					<ul class="mui-table-view">
		    	        <li class="mui-table-view-cell">

		    	                首付
		    	                <span class="mui-pull-right"><em class="downPaymentNum">100</em>万</span>
		    	        </li>
		    	        <li class="mui-table-view-cell">

		    	                 贷款总额
		    	                 <span class="mui-pull-right"><em class="showLoanAll">100</em>万</span>
		    	        </li>
		    	        <li class="mui-table-view-cell">

		    	                 利息总额
		    	                 <span class="mui-pull-right" id="allInterest">100万</span>
		    	        </li>
		    	        <li class="mui-table-view-cell">

		    	                 月供
		    	                 <span class="mui-pull-right monthPay">100万</span>
		    	        </li>
		    	    </ul>
		    	    <div align="center" class="pt5 mb5 showLoanDetail bg-white" id="sameCapDetail">
		    	    	<span class="colorGreen f10">查看月供详情</span>
		    	    </div>
		    	    <p class="p10">以上结果仅供参考，请以当地实际情况为准</p>
				</div>
				<div id="item2" class="mui-control-content">
					<ul class="mui-table-view">
		    	        <li class="mui-table-view-cell">

		    	                首付
		    	                <span class="mui-pull-right"><em class="downPaymentNum2">100</em>万</span>
		    	        </li>
		    	        <li class="mui-table-view-cell">

		    	                 贷款总额
		    	                 <span class="mui-pull-right "><em class="showLoanAll2"></em>万</span>
		    	        </li>
		    	        <li class="mui-table-view-cell">

		    	                 利息总额
		    	                 <span class="mui-pull-right" id="allInterest2"></span>
		    	        </li>
		    	        <li class="mui-table-view-cell">

		    	                 月供
		    	                 <span class="mui-pull-right monthPay2">100万</span>
		    	        </li>
		    	        <li class="mui-table-view-cell">

		    	                 月供递减额
		    	                 <span class="mui-pull-right monthPayDes">100万</span>
		    	        </li>
		    	    </ul>
		    	    <div align="center" class="pt5 mb5 showLoanDetail bg-white" id="sameIntDetail">
		    	    	<span class="colorGreen f10">查看月供详情</span>
		    	    </div>
		    	    <p class="p10">以上结果仅供参考，请以当地实际情况为准</p>
				</div>
			</div>
		    	    </div>
		    	<button type="button" class="mui-btn mui-btn-blue mui-btn-block pct80 mauto" id="countPay">计算</button>
		    </nav>
		</div>
		
		</div>
		
		<script src="../js/mui.min.js"></script>
		<script src="../js/mui.picker.min.js"></script>
	<script src="../js/common.util.js"></script>
	<script src="../js/network.js"></script>
	<script src="../js/fj_area_util.js"></script>	
		<script src="../js/md5.js"></script>
		<script src="../js/data.js"></script>
		<script src="../js/iscroll.js"></script>
		<script src="../js/iosSelect.js"></script>
		<script src="../js/fj_public_js.js"></script>
		<script src="../js/xzx.open.js"></script>
		
		<script src="../js/mortgageJS.js"></script>
		
		<script type="text/javascript">
			mui.init({
				hardwareAccelerated:true	//开启硬件加速
			});
			
		</script>
	</body>

</html>